今天要寫的主題是圖片位移的效果
左/右兩邊的圖片依序往左/右做散開動作 中間的圖片不動
一樣把基本架構寫好

<div class="container centered-wrap">
  <div class="photo"><img src="http://www.hicker-stock-photography.com/images/600/toronto-skyline-dusk-ontario-184.jpg"></div>
  <div class="photo"><img src="http://www.galentse.com/uploads/1/7/6/8/17682857/_1344039_orig.jpg"></div>
  <div class="photo"><img src="https://images.freeimages.com/images/large-previews/372/aerial-view-of-manhattan-1370442.jpg"></div>
  <div class="photo"><img src="https://photos.smugmug.com/Temples/Organized-by-Temple/Brigham-City-LDS-Temple/i-J3Chq6r/0/a60b694a/L/Brigham%20City%20Temple%20Sunrise%20%28Vertical%29_8D16074-Edit-L.jpg"></div>
  <div class="photo"><img src="http://www.aviewoncities.com/img/philadelphia/kveus5810s.jpg"></div>
</div>

然後寫基本的css

body{
  background:#262626;
}

.centered-wrap{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.centered-wrap .photo{
  /*讓圖片做水平排列*/
  display:inline-block;
  max-width:155px;
  margin:2% 0px;
  /*要將圖片設定成相對位置 不然圖片會動不了*/
  position:relative;
}

.centered-wrap .photo img{
  max-width:95%; 
}

接下來依圖片順序寫各自的動畫 css 跟安排圖片的 z-index，
寫 z-index 的目的是避免第四張、第五張的圖片蓋過中間的圖片

/*1st img*/
.centered-wrap .photo:nth-of-type(1){
  animation:left-ani1 1s linear forwards;
  transform:scale(0.9);
  z-index:2;
}

/*1st img animation*/
@keyframes left-ani1{
  0%{
    left: 45%;
  }
  100%{
    left:0%;
  }
}
/*2nd img*/
.centered-wrap .photo:nth-of-type(2){
  animation:left-ani2 1.2s linear forwards;
  transform:scale(0.95);
  z-index:4;
}
/*2nd img animation*/
@keyframes left-ani2{
  0%{
    left: 20%;
  }
  100%{
    left:0%;
  }
}
/*3rd img a.k.a centered img*/
.centered-wrap .photo:nth-of-type(3){
  z-index:5;
}

/*4th img*/
.centered-wrap .photo:nth-of-type(4){
  animation:right-ani1 1.2s linear forwards;
  transform:scale(0.95);
  z-index:4;
}
/*4th img animation*/
@keyframes right-ani1{
  0%{
    right: 20%;
  }
  100%{
    right:0%;
  }
}

/*5th img*/
.centered-wrap .photo:nth-of-type(5){
  animation:right-ani2 1s linear forwards;
  transform:scale(0.9);
  z-index:2;
}

/*5th img animation*/
@keyframes right-ani2{
  0%{
    right: 40%;
  }
  100%{
    right:0%;
  }
}

到這邊就完成了 圖片往兩側散開的效果
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/wYYBqQ